<template>
  <div :class="{homeContainer,homeContainerone,homeContainertwo}">
<!--    移动端导航条-->
    <div @click="mobileOperationBgc = false; mobileOperation = false" :style="mobileOperationBgc == false ? 'display: none;' : 'display: block;'" class="mobileOperationBgc">
      <div @click.stop :style="mobileOperation == false ? 'width: 0px;' : 'width: 60%; '" class="mobileOperation">
        <div class="operationTop">
          <div class="box">
            <img :src="picture" alt="">
            <p><span>{{ name }}</span></p>
            <p>{{ idiograph }}</p>
          </div>
        </div>
        <div @click="mobileOperationBgc = false; mobileOperation = false" class="operationBottom">
          <i @click="$router.push('/index')" class="iconfont icon-shouyex"> <span>首页</span></i>
          <i @click="$router.push('/article')" class="iconfont icon-wenzhang"> <span>文章列表</span></i>
          <i @click="$router.push('/photos')" class="iconfont icon-biaoti"> <span>云相册</span></i>
          <i @click="$router.push('/amusement')" class="iconfont icon--"><span>娱乐</span></i>
          <i @click="$router.push('/comment')" class="iconfont icon-liuyan2"> <span>留言板</span></i>
          <i @click="Gogithub"><span class="iconfont">&#xe63a; Gitee</span></i>
          <i @click="$router.push('/profile')" class="iconfont icon-touxiang"><span>个人信息</span></i>
          <i @click="login" class="iconfont icon-denglu"> <span>登陆 / 注册</span></i>
        </div>
      </div>
    </div>
<!--   背景图 -->
    <img class="bgc" :src="bgc" alt="">
<!--   背景图遮住层  -->
    <div class="bgctwo" id="bgctwo"></div>
<!--    顶部导航条-->
    <div class="header">
      <div class="mobileHeaderleft" @click.stop="showOperation">
        <i class="el-icon-s-operation"></i>
      </div>
      <div class="header-left">
        <img src="../assets/images/banniang2.gif" alt="">
        <span>blog</span>
      </div>
      <div   class="header-right">
        <i @click="$router.push('/index')" class="iconfont icon-shouyex"> 首页</i>
        <i @click="$router.push('/article')" class="iconfont icon-wenzhang"> 文章列表</i>
        <i @click="$router.push('/photos')" class="iconfont icon-biaoti"> 云相册</i>
        <i @click="$router.push('/amusement')" class="iconfont icon--">娱乐</i>
        <i @click="$router.push('/comment')" class="iconfont icon-liuyan2"> 留言板</i>
        <i @click="Gogithub"><span class="iconfont">&#xe63a; Gitee</span></i>
        <i @click="$router.push('/profile')" class="iconfont icon-touxiang"> 个人信息</i>
        <i @click="login" class="iconfont icon-denglu"> 登陆 / 注册</i>
      </div>
    </div>

<!--    改变背景图板娘-->
    <div class="changeBgc">
      <span class="el-card">点我有惊喜哦</span>
      <img @click="changeBgc" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602775397152&di=eaefbb366230d2b0d668bbecb64d937d&imgtype=0&src=http%3A%2F%2Fs1.hdslb.com%2Fbfs%2Fstatic%2Fblive%2Fblfe-live-act1702%2Fstatic%2Fimg%2F351.ebc818d.gif" alt="">
    </div>
<!--  子路由  -->
    <transition name="fade">
    <router-view class="footer view"></router-view>
    </transition>
<!--    返回顶部图标-->
    <img  class="go-top" @click="backTop" src="../assets/images/goback.jpg" alt="">
    <shuibowen></shuibowen>
  </div>
</template>

<script>
import bottom from "@/components/bottom";
import shuibowen from "@/components/shuibowen";
export default {
  data() {
    return {
      name: '',
      idiograph: '',
      picture:  '',
      homeContainer: true,
      homeContainerone: true,
      homeContainertwo: false,
      transitionName:'',
      bgc: require('../assets/images/1.jpg'),
      bgc2: require('../assets/images/xingkong.gif'),
      timer: '',
      colors: '',
      colorList: [
        'rgba(255,192,203,0.2)',
        'rgba(238,130,238,0.2)',
        'rgba(123,104,238,0.2)',
        'rgba(100,149,237,0.2)',
        'rgba(255,99,71,0.2)',
        'rgba(240,128,128,0.2)',
      ],
      mobileOperationBgc: false,
      mobileOperation: false
    }
  },
  async created() {

    var h = 0
    this.timer = await window.setInterval(() => {
      var bgctwo = document.getElementById('bgctwo')
      this.color = this.colorList[h]
      bgctwo.style.backgroundColor = this.color
      h++
      if (h >= this.colorList.length) {
        h = 0
      }
    },7000)
  },
  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
    window.clearInterval(this.timer)
  },
  methods:{
    showOperation() {
      this.name = window.sessionStorage.getItem('name')
      this.idiograph = window.sessionStorage.getItem('idiograph')
      this.picture = window.sessionStorage.getItem('picture')
      this.mobileOperationBgc = true
      this.mobileOperation = true
    },
    login () {
      this.$router.push('/login')
    },
    Gogithub() {
      window.open('https://gitee.com/fish_fairy')
    },
    changeBgc () {
      const a = this.bgc
      this.bgc = this.bgc2
      this.bgc2 = a
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },

    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop () {
      var top = document.querySelector('.go-top')
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 300) {
        top.style.opacity = '1'
        top.style.transition = 'all 0.5s'
      } else {
        top.style.opacity = '0'
        top.style.transition = 'all 0.5s'
      }
    }
  },
  watch: {//使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if(to.meta.index > from.meta.index){
        //设置动画名称
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }
    }
  },
  components: {
    bottom,
    shuibowen
  }
}
</script>

<style lang="less" scoped>
.homeContainer{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-size: 100% 100%;
  .mobileOperationBgc{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0,0,0,0.3);
    .mobileOperation{
      width: 0px;
      height: 100%;
      animation: width 0.1s;
      @keyframes width{
        from{
          width: 0px;
        }
        to{
          width: 60%;
        }
      }
      .operationTop{
        width: 100%;
        height: 30%;
        background-image: linear-gradient(to right, #6853F2 0%, #2FAAB9 100%);
        display: flex;
        flex-direction: column;
        color: white;
        overflow: hidden;
        .box{
          margin: 5vw 3vw 0px 5vw;
          img{
            width: 70px;
            height: 70px;
            border-radius: 50%;
          }
          p{
            margin: 2.5vw 0px;
            font-size: 12px;
            span{
              font-size: 26px;
            }
          }
        }
      }
      .operationBottom{
        width: 100%;
        height: 70%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        i{
          flex: 1;
          display: flex;
          align-items: center;
        }
      }
    }
  }


  .go-top{
    width: 60px;
    height: 60px;
    position: fixed;
    right: 20px;
    bottom: 50px;
    border-radius: 50%;
  }
  .bgc{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -2;
  }
  .bgctwo{
    background-color: rgba(255,192,203,0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
  }
  .header{
    background-image: linear-gradient(to right, #6853F2 0%, #2FAAB9 100%);
    opacity: 0.8;
    position: fixed;
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    .mobileHeaderleft{
      position: absolute;
      left: 5%;
      font-size: 26px;
      color: white;
      display: none;
    }
    .header-left{
      display: flex;
      justify-content: center;
      align-items: center;

      img{
        width: 40px;
        height: 40px;
      }
      span{
        font-size: 25px;
        color: orange;
        margin-left: 20px;
      }
    }
    .header-right{
      margin-left: 20%;
      height: 100%;
      display: flex;
      align-items: center;
      text-align: center;
      line-height: 56px;
      i{
        flex: 1;
        display: inline-block;
        width: 105px;
        height: 100%;
        cursor: pointer;
        color: white;
        &:hover{
          background-color: rgba(0,0,0,0.2);
        }
      }
    }
  }
  .changeBgc{
    position: fixed;
    z-index: 99;
    top: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .el-card{
      color: orange;
      margin-left: 5px;
    }
    img{
      width: 100px;
      height: 100px;
    }
  }
  .footer{
    margin-top: 56px;
  }

}
@media (min-width: 992px) and (max-width: 1300px) {
  .homeContainer{
    .go-top{
      width: 50px;
      height: 50px;
    }
    .header{
      .header-left{
        margin-right: 2%;
      }
      .header-right{
        font-size: 6px !important;
        i{
          width: 100px;
        }
      }
    }
    .changeBgc {
      img{
        width: 70px;
        height: 70px;
      }
    }
  }

}
@media (min-width: 768px) and (max-width: 991px) {
  .homeContainer{
    .mobileHeaderleft{
      display: block !important;
    }
    .header{
      .header-right{
        display: none;
      }
    }
    .go-top{
      width: 30px;
      height: 30px;
      right: 0px;
      z-index: 88;
    }
    .changeBgc {
      font-size: 8px;
      img{
        width: 50px;
        height: 50px;
      }
    }
  }

}
@media (max-width: 767px) {
  .homeContainer{
    .mobileHeaderleft{
      display: block !important;
    }
    .header{
      .header-right{
        display: none;
      }
    }
    .go-top{
      width: 30px;
      height: 30px;
      right: 0px;
      z-index: 88;
    }
    .changeBgc {
      font-size: 8px;
      img{
        width: 40px;
        height: 40px;
      }
    }
  }
}


.view {
  width: 100%;
  position: absolute;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 250ms;
  position: absolute;
}
.fade-enter{
  //visibility: hidden;
  opacity: 0;
}
.fade-leave-to{
  display: none;
}
.fade-enter-active,
.fade-leave-active{
  transition: opacity .9s ease;
}
.fade-enter-to,
.fade-leave{
  visibility: visible;
  opacity: 1;
}


</style>
